<template>
	<view>
		<navBarView></navBarView>
		<navBar navBarTitle='分类咨询' bg='#f0f2f5' @rightIconChange="openPopup"></navBar>
		<view class="content-block">
			<view class="left-option">
				<block v-for="(item,index) in classifyLst" :key="index">
					<view class="item" :class="classifyIndex==index?'item-check':'item-no-check'"
						@click="classifyClick(index,item)">
						{{item.name}}
					</view>
				</block>
			</view>
			<view class="right-option">
				<block v-for="(itemTwo,indexTwo) in xl" :key="indexTwo">
					<view class="right-lst-block" v-if="menusIndex == itemTwo.courseId">
						<view class="hint-txt">{{itemTwo.name}}</view>
						<view class="lst-item">
							<block v-for="(itemThree,indexThree) in kc" :key="indexThree">
								<view class="item-option" @click="coureDetailClick(itemThree)"
								v-if="parseInt(itemThree.categoryId) === itemTwo.id"
								>
									<image :src="itemThree.image" class="item-img"></image>
									<view class="item-txt">{{itemThree.name}}</view>
								</view>
							</block>
						</view>
					</view>
				</block>
			</view>
		</view>
		<sumitPopup ref="submitPopupRef" :classifyArr='courseLst' @submitPopupChange='submitPopupChange'></sumitPopup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classifyLst: [],
				classifyIndex: 0,
				rightLst: [],
				dl: [],
				kc: [],
				xl: [],
				rightTitle: '',
				courseLst: [],
menusIndex:'',
			}
		},
		onLoad() {
			this.courseLst = uni.getStorageSync('courseLst')
			this.initData()
		},
		onShow() {

		},
		methods: {
			openPopup() {
				this.$refs.submitPopupRef.openPopup()
			},
			initData() {
				console.log('initData=======')
				this.$http('common.selectCourseAndDetail', {
					adminId: uni.getStorageSync('adminId')
				}).then(res => {
					console.log('res==selectCourse===', res)
					if (res.code == 200) {
						this.classifyLst = res.data.dl
						this.xl = res.data.xl
						this.kc = res.data.kc
						this.menusIndex=this.classifyLst[0].id
						// this.initRightData(this.classifyLst[0].id)
					}
				})
			},
			initRightData(id) {
			
				// let arr = []
				// console.log('initRightData=======', id)
				// this.xl.forEach(item => {
				// 	if (item.courseId == id) {
				// 		let courseArr = []
				// 		console.log('kcItem=======', item.courseId)
				// 		this.kc.forEach(kcItem => {
				// 			if (item.id == kcItem.categoryId) {
				// 				courseArr.push()
				// 				let obj = {
				// 					rightTitle = item.name
				// 				}
				// 				arr.push(kcItem)
				// 			}
				// 		})
				// 	}
				// })
				// console.log('arr======', arr)

				// this.rightLst = arr
			},
			classifyClick(index, item) {
				this.rightLst = []
				this.rightTitle = ''
				this.classifyIndex = index
				this.menusIndex = item.id
				this.initRightData(item.id)
			},
			coureDetailClick(item) {
				uni.setStorageSync('coureItem', item)
				uni.navigateTo({
					url: '/pages/classify/detail'
				})
			},

		}
	}
</script>
<style>
	page {
		background: #F4F6F8;
	}
</style>
<style lang="scss">
	.content-block {
		margin-top: 16rpx;
		display: flex;

		.left-option {
			background: #FFFFFF;
			box-shadow: 8rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.02);
			height: 100vh;
			flex: none;
			width: 180rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.item {

				margin-top: 32rpx;
				width: 152rpx;
				// height: 74rpx;
				line-height: 74rpx;
				text-align: center;
			}

			.item-check {
				// margin-left: 12rpx;
				// margin-right: 12rpx;
				background: #209E9A;
				border-radius: 8rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				width: 152rpx;

			}

			.item-no-check {

				width: 152rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #B4B4B4;
			}
		}

		.right-option {
			margin-left: 24rpx;
			margin-right: 24rpx;
			flex: auto;

			.right-img {
				background: skyblue;
				// width: 518rpx;
				height: 204rpx;
				border-radius: 16rpx;
			}

			.right-lst-block {
				margin-top: 32rpx;

				.hint-txt {
					font-weight: 500;
					font-size: 36rpx;
					color: #191F26;
				}

				.lst-item {
					width: 100%;
					margin-top: 32rpx;
					display: flex;
					flex-wrap: wrap;

					align-items: flex-start;

					.item-option {
						width: 27%;
						margin-right: 32rpx;
						margin-bottom: 32rpx;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;

						.item-img {
							background: skyblue;
							border-radius: 16rpx;
							width: 150rpx;
							height: 114rpx;
						}

						.item-txt {
							margin-top: 12rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #191F26
						}
					}
				}
			}
		}
	}
</style>